<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ol>
    <div class="demo">
        <div class="box">
            <span class="erweima">×</span>
        </div>
    </div>

    <script>
        //之前的获取元素方法操作繁琐
        //所以利用节点层级关系获取元素
        //节点用node表示

        //1. 父级节点 node.parentNode
        var ewm = document.querySelector('.erweima')
        //此时想要获得erweima外面的box可以这么写
        console.log(ewm.parentNode);
        //注意得到的时离他最近的父级节点 如果找不到则返回null

        //2.子节点
        var ul = document.querySelector('ul');
        console.log(ul.childNodes);//可以这样直接获取子节点
        //但是这样得到的是所有的节点,很杂,想要单独保留操作麻烦,所以一般不用这个
        //一般用 parentNode.children(非标准)
        console.log(ul.children);

        //parentNode.firstChild 找第一个节点,包含所有节点,找不到返回null
        //同理还有parent.lastChile
        //但是这这俩返回的是所有子节点中的,所以有时候想获取元素节点可能就获得的是text节点

        //这个: parent.firstElementChild  parent.lastElementChild 可以直接获得元素节点
        //这个好但是有兼容性问题,IE9以上才支持

        //所以一般用这个: 
        console.log(ul.children[0]);//获取第一个
        console.log(ul.children[ul.children.length-1]);//获取最后一个

        //3.兄弟节点
        //node.nextSibling 获得下一个兄弟节点 包含元素节点或者文本节点等等,找不到返回null
        console.log(ul.nextSibling);
        //同理: node.previousSibling 获得上一个兄弟节点 同上

        //如果只想找元素节点可以用 node.nextElementSibling
        console.log(ul.nextElementSibling);
        //返回当前元素下一个兄弟元素节点,找不到返回null
        //找上一个也是同理
        //但是这俩都有一个问题:兼容性问题

        //4.(动态)创建节点
        //1.创建元素节点
        var li = document.createElement('li');
        //2.添加节点,添加到父元素的子元素列表中的最后面
        ul.appendChild(li);

        //在父元素的指定子元素前面添加节点
        var li1 = document.createElement('li')
        ul.insertBefore(li1,ul.children[0])

        //5.删除节点
        ul.removeChild(ul.children[0])

        //5.复制节点
        //node.cloneNode()
        var ol = document.querySelector('ol')
        ol.appendChild(ol.children[0].cloneNode(true))
        //如果括号参数为空或者法拉瑟,则是浅拷贝,意思是,只克隆节点本身,节点内的内容不会跟着克隆过来
        //将括号内参数写为true,就可以把内容也跟着克隆过来

        //三种动态创建元素的区别
        //1.document.write() 创建元素
        document.write('<div>123</div>')
        //这个是直接将内容写入页面的内容流
        //但是文档流执行完毕,则它会导致页面全部重绘(重新绘制一个新的页面,原先的内容都没了),很少使用

        //2.innerHTML创建元素
        ol.children[4].innerHTML = '<a href="#">haha</a>'

        //3.document.createElement创建元素
        var a = document.createElement('li')
        ol.appendChild(a)
    </script>
    
</body>
</html>